<template>
 <div  class="contant">
            <div class="left">
                <el-tabs  >
                    <el-tab-pane >
                        <template #label>
                            <span class="custom-tabs-label">
                                <el-button type="info">最新</el-button>
                            </span>
                        </template>
                        <div class="tans">
                            <Tan  v-for="i in 8" class="tan"></Tan>
                        </div>
                        
                    </el-tab-pane>
                    <el-tab-pane >
                        <template #label>
                            <span>
                                <el-button type="primary">精选</el-button>
                            </span>
                        </template>
                        <div class="tans">
                            <Tan  v-for="i in 2" class="tan"></Tan>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane >
                        <template #label>
                            <span>
                                <el-button type="success">前端</el-button>
                            </span>
                        </template>
                        <div class="tans">
                            <Tan  v-for="i in 4" class="tan"></Tan>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane >
                        <template #label>
                            <span >
                                <el-button type="warning">后端</el-button>
                            </span>
                        </template>
                        <div class="tans">
                            <Tan  v-for="i in 1" class="tan"></Tan>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane >
                        <template #label>
                            <span >
                                <el-button type="info">数据库</el-button>
                            </span>
                        </template>
                        <div class="tans">
                            <Tan  v-for="i in 1" class="tan"></Tan>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane >
                        <template #label>
                            <span>
                                <el-button type="primary">面试题</el-button>
                            </span>
                        </template>
                        <div class="tans">
                            <Tan  v-for="i in 2" class="tan"></Tan>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane >
                        <template #label>
                            <span>
                                <el-button type="success">java</el-button>
                            </span>
                        </template>
                        <div class="tans">
                            <Tan  v-for="i in 4" class="tan"></Tan>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane >
                        <template #label>
                            <span >
                                <el-button type="warning">运维</el-button>
                            </span>
                        </template>
                        <div class="tans">
                            <Tan  v-for="i in 1" class="tan"></Tan>
                        </div>
                    </el-tab-pane>
                </el-tabs>  
            </div>  
            <div class="right">
                  <bandan></bandan>
           </div>   
        </div>
</template>
<script>
import Tan from '../components/tan.vue'
import bandan from '../components/bandan.vue'
</script>
<style>
.contant{
    width: 1120px;
    
    margin:0 auto ;
}
.left{
    width: 810px;
   
    float: left;
}
.right{  
    float: left;
    width: 270px;
   position: relative; 
    margin-left: 30px; 
    top:55px
}
.tan{
    margin-bottom: 25px;
}
.tans{
    width: 800px;
}
</style>